// let layerIndex;
// let $;
// var toast;
// /**
//  * 弹出学生新增加/更新对话框
//  * 有id编辑，无id新增
//  */
//
// function showStudentDlg(id) {
//     let title = "新增学生";
//     if (id) {
//         // 是编辑
//         title = "编辑学生";
//         $("#formId").css("display", "block");
//
//         // 读取学生信息，并赋值
//         $.ajax({
//             url: "/api/student/" + id,
//             method: "GET"
//         }).done(result => {
//             console.log(result);
//
//
//             if(result.code>=0) {
//                 let data = result.data;
//
//                 // 遍历result对象并将值填充到 #studForm 表单
//                 $.each(result.data, function (key, value) {  // 键值对(属性名，属性值)
//                     // 修改选择器，确保选择的是 #studForm 内的字段
//                     var filed = $('#studForm [name="' + key + '"]');
//
//                     if (filed.is(':radio')) { // 类型为单选框
//                         filed.filter('[value="' + value + '"]').prop('checked', true); // 选中对应的单选按钮
//                     } else if (filed.is(':checkbox')) { // 类型为复选框
//                         filed.prop('checked', value === "yes"); // 选中复选框
//                     } else { // 其他类型
//                         filed.val(value); // 填充文本框或其他字段
//                     }
//                 });
//                 //再次渲染表单，确保ui更新
//                 layui.form.render();
//
//
//             }else {
//                 //出错了
//                 toast.error({
//                     message:result.msg,
//                 });
//             }
//
//         });
//
//     } else {
//         // 新增
//         $("#studForm")[0].reset(); // 清空表单内容
//         $("#formId").css("display", "none"); // 新增学生是不显示id,id不填写
//     }
//
//     layerIndex = layer.open({
//         type: 1,
//         title: title,
//         area: ['520px', 'auto'],
//         content: $('#popDlg')[0].innerHTML // 捕获层
//
//     });
// }
//
// // 查询条件代码
// function getSearchCondition() {
//     let formData = {}; // 初始化一个空对象，用于存储表单数据
//
//     // 遍历每个输入元素，将其值存储到 formData 对象中
//     $('#queryForm').find('input, select').each(function () {
//         let name = $(this).attr('name'); // 获取元素的 name 属性
//         let value = $(this).val(); // 获取元素的值
//
//         // 只有 name 属性存在且值不为空才会添加到 formData 中
//         if (name && value) {
//             formData[name] = value;
//         }
//     });
//
//     console.log("请求数据:", formData); // 调试输出请求数据
//     return formData; // 返回包含表单数据的对象
// }
//
//
// function loadStudentList() {
//     const table = layui.table;
//     let student = getSearchCondition();
//     table.reloadData("tbStudent", {
//         where: {data: student}
//     });
// }
//
// layui.use(['form', 'table', 'layer'], function () {
//     $=layui.$
//     toast = layui.toast;
//     const form = layui.form;
//     const table = layui.table;
//     const layer = layui.layer;
//
//
//     //(1)验证表单是否合法
//     form.on('submit(stud-dlg)', function (data) {
//         event.preventDefault(); // 阻止表单默认提交
//         // commitStuDlg();
//
//         //防止重复提交表单的标记
//         if (this.isSubmitting) return false;
//         this.isSubmitting = true;
//         commitStuDlg()
//             .catch(error => {
//                 console.error('提交失败', error);
//             })
//             .finally(()=>{
//                 this.isSubmitting = false;
//             });
//         return false;
//     });
//
//     //(2)表格初始化
//     let student = getSearchCondition(); // 获取查询条件-示例代码
//
//     // 创建layui渲染实例
//     table.render({
//         elem: '#tbStudent', // 指定表格容器的 ID
//         url: '/api/student/getbypage', // 此处为静态模拟数据，实际使用时需换成真实接口
//         method: "POST",
//         contentType: 'application/json', // 确保以 JSON 格式发送
//         where: { data: student }, // 传递的数据
//         page: true, // 支持分页
//         cols: [[
//             { type: 'checkbox', fixed: 'left' }, // 添加复选框列
//             { field: 'id', fixed: 'left', width: 80, title: 'id', sort: true }, // 定义列：id
//             { field: 'name', title: '姓名' }, // 定义列：姓名
//             { field: 'no', title: '学号', width: 150 },
//             {
//                 field: 'sex', width: 150, title: '性别', sort: true,
//                 templet: d => d.sex === 1 ? '男' : (d.sex === 2 ? '女' : '未知'), // 自定义性别显示,
//             },
//             { field: 'age', width: 150, title: '年龄', sort: true },
//             { field: 'major', width: 150, title: '主修', sort: true },
//             { field: 'role', width: 150, title: '角色', sort: true },
//             {
//                 fixed: 'right',
//                 title: '操作', width: 134, minWidth: 125, templet: '#editTemplate' // 操作列，使用自定义模板
//             }
//
//         ]],
//         done: function (rs) {
//             console.log("表格渲染完成，返回数据:", rs); // 调试输出表格渲染结果
//             if (rs.data.length === 0) {
//                 layer.msg('没有找到相关数据'); // 提示没有数据
//             }
//         },
//         fail: function (rs, msg) {
//             console.error("表格渲染失败:", msg); // 调试输出表格渲染失败信息
//             layer.msg('请求失败，请重试'); // 提示请求失败
//         }
//     });
//
//     // 触发单元格工具事件
//     table.on('tool(tbStudent)', function (obj) {
//         var data = obj.data; // 获取当前行数据
//         console.log(obj);
//         if (obj.event === 'edit') {
//             showStudentDlg(data.id);  //编辑的时候跳出的已有的弹出框
//         } else if (obj.event === 'delete') {
//             deleteById(data.id);
//         }
//     });
// });
//
// function search() {
//     let student = getSearchCondition();
//     const table = layui.table;
//     table.reloadData("tbStudent", {
//         where: { data: student }
//     });
//     console.log("where condition:" + JSON.stringify(student));
// }
//
// // 删除
// function deleteConfirm() {
//     const table = layui.table;
//     // 获取表格的选中状态
//     const checkStatus = table.checkStatus('tbStudent'); // 'tbStudent'为表格ID或layui-filter
//
//     if (checkStatus.data.length === 0) {
//         layer.msg('请至少选择一条数据');
//         return;
//     }
//
//     layer.confirm('确定删除选中的' + checkStatus.data.length + '条数据吗？', {icon: 3}, function(index) {
//         const ids = checkStatus.data.map(item => item.id);
//
//         $.ajax({
//             url: "/api/student/deleteBatch",
//             method: "POST",
//             contentType: "application/json",
//             data: JSON.stringify(ids),
//             success: function(result) {
//                 if (result.code === 0) {
//                     layer.msg('删除成功');
//                     loadStudentList();
//                 } else {
//                     layer.msg('删除失败: ' + result.msg);
//                 }
//             },
//             error: function() {
//                 layer.msg('删除失败');
//             }
//         });
//         layer.close(index);
//     });
// }
//
// // 提交//第一次编写的成功但效果不好
// // function commitStuDlg() {
// //     let id = $("#id").val(); // 读取id
// //     let formData = $(".layui-layer-page #studForm").serializeArray(); // 读取表单数据
// //
// //     // 将formData转换为JSON对象
// //     let data = {};
// //     formData.forEach(function (item) {
// //         data[item.name] = item.value;
// //     });
// //
// //     $("#btnOK").prop("disabled", true).addClass("layui-btn-disabled"); // 禁用按钮
// //
// //     if (id != null && id != "") {
// //         // id不为空，为更新学生
// //         $.ajax({
// //             url: "/api/student/update",
// //             method: "PUT",
// //             contentType: 'application/json', // 确保以 JSON 格式发送
// //             data: JSON.stringify(data) // 发送JSON格式的数据
// //         }).done(result => {
// //             console.log(result);
// //             if (result.code === 0) {
// //                 loadStudentList();
// //                 if (layerIndex) layer.close(layerIndex);
// //                 layer.msg('更新成功');
// //             } else {
// //                 layer.msg(result.msg);
// //             }
// //         }).fail((jqXHR, textStatus, errorThrown) => {
// //             console.error("Request failed: " + textStatus + " - " + errorThrown);
// //             layer.msg('更新失败: ' + errorThrown);
// //             $("#btnOK").prop("disabled", false).removeClass("layui-btn-disabled");
// //         });
// //     } else {
// //         // id为空为新增学生
// //         $.ajax({
// //             url: "/api/student/add",
// //             method: "POST",
// //             contentType: 'application/json', // 确保以 JSON 格式发送
// //             data: JSON.stringify(data) // 发送JSON格式的数据
// //         }).done(result => {
// //             console.log(result);
// //             if (result.code === 0) {
// //                 loadStudentList();
// //                 if (layerIndex) layer.close(layerIndex);
// //                 layer.msg('添加成功');
// //             } else {
// //                 layer.msg(result.msg);
// //             }
// //         }).fail((jqXHR, textStatus, errorThrown) => {
// //             console.error("Request failed: " + textStatus + " - " + errorThrown);
// //             layer.msg('添加失败: ' + errorThrown);
// //             $("#btnOK").prop("disabled", false).removeClass("layui-btn-disabled");
// //         });
// //     }
// // }
//
// //第二次编写的，按视频的但是不成功，
// // function commitStuDlg() {
// //     //返回Promise以便更好的控制流程
// //     return new Promise((resolve, reject) => {
// //
// //
// //     $("#btnOK").prop("disabled", true).addClass("layui-btn-disabled");
// //
// //     const id = $("#id").val();
// //     const formData = $(".layui-layer-page #studForm").serialize();
// //     const url=id ? "/api/student/update" : "/api/student/add";
// //     const method = id ? "PUT" : "POST";
// //
// //     $.ajax({
// //         url: url,
// //         method: method,
// //         //contentType: 'application/json', // 确保使用正确的 Content-Type
// //         data: formData
// //         //dataType: 'json' // 确保服务器返回的数据类型
// //     }).done(result => {
// //         if (result.code === 0 && result.data?.id) {
// //             //成功情况
// //             search();//刷新列表
// //             if (layerIndex){
// //                 layer.close(layerIndex);
// //             }
// //             resolve(result);
// //         }else {
// //             //处理业务逻辑错误
// //             const errorMsg = result.msg || (id ?"更新失败" : "新增失败，没有返回id");
// //             toast.error({message: errorMsg});
// //             reject (new Error(errorMsg));
// //         }
// //     }).fail((jpXHR,textStatus,errorThrown) => {
// //         const errorMsg =`请求失败: ${textStatus}- ${errorThrown}`;
// //         console.error(errorMsg);
// //         alert("系统错误，请稍后重试");
// //         reject(new Error(errorMsg));
// //     }).always(() => {
// //         //无论成功失败，最后都要恢复按钮状态
// //         $("#btnOK").prop("disabled", false).removeClass("layui-btn-disabled");
// //     });
// //
// //     });
// // }
//
// function commitStuDlg() {
//     return new Promise((resolve, reject) => {
//         $("#btnOK").prop("disabled", true).addClass("layui-btn-disabled");
//
//         const id = $("#id").val();
//         const formData = $(".layui-layer-page #studForm").serializeArray();
//         const data = {};
//         formData.forEach(item => {
//             data[item.name] = item.value;
//         });
//
//         const url = id ? "/api/student/update" : "/api/student/add";
//         const method = id ? "PUT" : "POST";
//
//         $.ajax({
//             url: url,
//             method: method,
//             contentType: 'application/json',
//             data: JSON.stringify(data)
//         }).done(result => {
//             if (result.code === 0) {
//                 loadStudentList();
//                 if (layerIndex) layer.close(layerIndex);
//                 layer.msg(id ? '更新成功' : '添加成功');
//                 resolve(result);
//             } else {
//                 const errorMsg = result.msg || (id ? "更新失败" : "添加失败");
//                 toast.error({ message: errorMsg });
//                 reject(new Error(errorMsg));
//             }
//         }).fail((jqXHR, textStatus, errorThrown) => {
//             const errorMsg = `请求失败: ${textStatus} - ${errorThrown}`;
//             console.error(errorMsg);
//             toast.error({ message: "系统错误，请稍后重试" });
//             reject(new Error(errorMsg));
//         }).always(() => {
//             $("#btnOK").prop("disabled", false).removeClass("layui-btn-disabled");
//         });
//     });
// }
//
//
//
// function deleteById(id) {
//     layer.confirm('你确定删除吗？一旦删除，不可恢复！', {icon: 3}, function() {
//         $.ajax({
//             url: "/api/student/delete/" + id,
//             method: "DELETE",
//             success: function(result) {
//                 if (result.code === 0) {
//                     layer.msg('删除成功');
//                     loadStudentList();
//                 } else {
//                     layer.msg('删除失败: ' + result.msg);
//                 }
//             },
//             error: function() {
//                 layer.msg('删除失败');
//             }
//         });
//     });
// }

let layerIndex;
let $;
var toast;

/**
 * 弹出学生新增/编辑对话框
 * 有id编辑，无id新增
 */
function showStudentDlg(id) {
    let title = "新增学生";
    if (id) {
        // 是编辑
        title = "编辑学生";
        $("#formId").css("display", "block");

        // 读取学生信息，并赋值
        $.ajax({
            url: "/api/student/" + id,
            method: "GET"
        }).done(result => {
            console.log(result);

            if(result.code >= 0) {
                let data = result.data;

                // 遍历result对象并将值填充到 #studentForm 表单
                $.each(result.data, function (key, value) {
                    var field = $('#studentForm [name="' + key + '"]');
                    if (field.is('select')) {
                        field.val(value.toString());
                    } else {
                        field.val(value);
                    }
                });
                // 再次渲染表单，确保UI更新
                layui.form.render();
            } else {
                // 出错了
                toast.error({
                    message: result.msg,
                });
            }
        });
    } else {
        // 新增
        $("#studentForm")[0].reset(); // 清空表单内容
        $("#formId").css("display", "none"); // 新增时不显示id
    }

    layerIndex = layer.open({
        type: 1,
        title: title,
        area: ['520px', 'auto'],
        content: $('#popDlg')[0].innerHTML // 捕获层
    });
}

// 获取查询条件
function getStudentSearchCondition() {
    let formData = {}; // 初始化一个空对象，用于存储表单数据

    // 遍历每个输入元素，将其值存储到 formData 对象中
    $('#queryForm').find('input, select').each(function () {
        let name = $(this).attr('name'); // 获取元素的 name 属性
        let value = $(this).val(); // 获取元素的值

        // 只有 name 属性存在且值不为空才会添加到 formData 中
        if (name && value) {
            formData[name] = value;
        }
    });

    console.log("请求数据:", formData); // 调试输出请求数据
    return formData; // 返回包含表单数据的对象
}

// 加载学生列表
function loadStudentList() {
    const table = layui.table;
    let student = getStudentSearchCondition();
    table.reload('tbStudent', {
        where: {data: student},
        page: {
            curr: 1 // 保持当前页码或重置为第一页
        }
    });
}

layui.use(['form', 'table', 'layer'], function () {
    $ = layui.$;
    toast = layui.layer;
    const form = layui.form;
    const table = layui.table;
    const layer = layui.layer;

    // 验证表单是否合法
    form.on('submit(student-dlg)', function (data) {
        event.preventDefault(); // 阻止表单默认提交

        // 防止重复提交表单的标记
        if (this.isSubmitting) return false;
        this.isSubmitting = true;

        commitStudentDlg()
            .catch(error => {
                console.error('提交失败', error);
            })
            .finally(() => {
                this.isSubmitting = false;
            });
        return false;
    });

    // 表格初始化
    let student = getStudentSearchCondition(); // 获取查询条件

    // 创建layui渲染实例
    table.render({
        elem: '#tbStudent', // 指定表格容器的 ID
        url: '/api/student/getbypage', // 后端接口
        method: "POST",
        contentType: 'application/json', // 确保以 JSON 格式发送
        where: { data: student }, // 传递的数据
        page: true, // 支持分页
        cols: [[
            { type: 'checkbox', fixed: 'left' }, // 添加复选框列
            { field: 'id', fixed: 'left', width: 80, title: 'ID', sort: true },
            { field: 'no', title: '学号', width: 150 },
            { field: 'name', title: '姓名', width: 150 },
            {
                field: 'sex', title: '性别', width: 100,
                templet: function(d) {
                    return d.sex == 1 ? '男' : '女';
                }
            },
            { field: 'age', title: '年龄', width: 100, sort: true },
            { field: 'major', title: '专业', width: 200 },
            { field: 'role', title: '角色', width: 150 },
            {
                fixed: 'right',
                title: '操作', width: 150, templet: '#studentEditTemplate'
            }
        ]],
        done: function (rs) {
            console.log("表格渲染完成，返回数据:", rs);
            if (rs.data.length === 0) {
                layer.msg('没有找到相关数据');
            }
        },
        fail: function (rs, msg) {
            console.error("表格渲染失败:", msg);
            layer.msg('请求失败，请重试');
        }
    });

    // 触发单元格工具事件
    table.on('tool(tbStudent)', function (obj) {
        var data = obj.data; // 获取当前行数据
        console.log(obj);
        if (obj.event === 'edit') {
            showStudentDlg(data.id);  // 编辑时弹出已有数据的对话框
        } else if (obj.event === 'delete') {
            deleteStudentById(data.id);
        }
    });
});

// 查询
function searchStudent() {
    let student = getStudentSearchCondition();
    const table = layui.table;
    table.reload('tbStudent', {
        where: { data: student }
    });
    console.log("where condition:" + JSON.stringify(student));
}

// 批量删除确认
function deleteStudentConfirm() {
    const table = layui.table;
    // 获取表格的选中状态
    const checkStatus = table.checkStatus('tbStudent');

    if (checkStatus.data.length === 0) {
        layer.msg('请至少选择一条数据');
        return;
    }

    layer.confirm('确定删除选中的' + checkStatus.data.length + '条数据吗？', {icon: 3}, function(index) {
        const ids = checkStatus.data.map(item => item.id);

        $.ajax({
            url: "/api/student/deleteBatch",
            method: "POST",
            contentType: "application/json",
            data: JSON.stringify(ids),
            success: function(result) {
                if (result.code === 0) {
                    layer.msg('删除成功');
                    loadStudentList();
                } else {
                    layer.msg('删除失败: ' + result.msg);
                }
            },
            error: function() {
                layer.msg('删除失败');
            }
        });
        layer.close(index);
    });
}

// 提交学生表单
function commitStudentDlg() {
    return new Promise((resolve, reject) => {
        $("#btnOK").prop("disabled", true).addClass("layui-btn-disabled");

        const id = $("#id").val();
        const formData = $(".layui-layer-page #studentForm").serializeArray();
        const data = {};
        formData.forEach(item => {
            data[item.name] = item.value;
        });
        data.role = "student"; // 固定角色为学生

        const url = id ? "/api/student/update" : "/api/student/add";
        const method = id ? "PUT" : "POST";

        $.ajax({
            url: url,
            method: method,
            contentType: 'application/json',
            data: JSON.stringify(data)
        }).done(result => {
            if (result.code === 0) {
                loadStudentList();
                if (layerIndex) layer.close(layerIndex);
                layer.msg(id ? '更新成功' : '添加成功');
                resolve(result);
            } else {
                const errorMsg = result.msg || (id ? "更新失败" : "添加失败");
                toast.error({ message: errorMsg });
                reject(new Error(errorMsg));
            }
        }).fail((jqXHR, textStatus, errorThrown) => {
            const errorMsg = `请求失败: ${textStatus} - ${errorThrown}`;
            console.error(errorMsg);
            toast.error({ message: "系统错误，请稍后重试" });
            reject(new Error(errorMsg));
        }).always(() => {
            $("#btnOK").prop("disabled", false).removeClass("layui-btn-disabled");
        });
    });
}

// 删除单个学生
function deleteStudentById(id) {
    layer.confirm('你确定删除吗？一旦删除，不可恢复！', {icon: 3}, function() {
        $.ajax({
            url: "/api/student/delete/" + id,
            method: "DELETE",
            success: function(result) {
                if (result.code === 0) {
                    layer.msg('删除成功');
                    loadStudentList();
                } else {
                    layer.msg('删除失败: ' + result.msg);
                }
            },
            error: function() {
                layer.msg('删除失败');
            }
        });
    });
}
